<template>
  <div class="recommend" ref="homePage">
    <!-- <v-search></v-search> -->
    <v-hotsearch></v-hotsearch>
    <div>
      <div class="product">
        <div class="img-box">
          <img width="100%" src="https://resource.sz-trip.com/uploads/20180612/2e28a940dd27d11d5854ecd3503ea01a.jpeg" />
        </div>
        <div class="tet-box">
          <p class="name">“古城寻根”苏式生活体验游</p>
          <p class="intro">“古城寻根”苏式生活体验游</p>
          <div class="tip1">
            <span style="color: #46d0ca;margin-right: 0.625rem;">5分</span>
            <span>666喜欢</span>
          </div>
          <div class="tip2">
            <div class="tags">
              <van-tag style="margin-right: 0.3125rem;"  color="#46d0ca " size="9px" round plain>标签</van-tag>
              <van-tag color="#46d0ca " size="1px" round plain danger>标签</van-tag>
            </div>
            <p class="price">￥<span>666</span><span style="color: #666;margin-left: 0.25rem;font-size: 0.5rem;">起</span></p>
          </div>
        </div>
      </div>
    </div>
     <v-min></v-min>
  </div>
</template>

<script>
  import min from '@/views/Min.vue'
  import search from '../views/search.vue'
  import hotsearch from '../views/Hotsearch.vue'
  export default {
    components: {
      // "v-search": search,
      "v-hotsearch": hotsearch,
      "v-min": min,
    },
    data() {
      return {
        clintHeigth: '', //获取页面高度
      }
    },

    mounted() {
      this.clientHeight = `${document.documentElement.clientHeight}` //document.body.clientWidth;
      // console.log(this.clientHeight);
      // let dd = 100;
      this.$refs.homePage.style.minHeight = this.clientHeight + 'px';
    },
  }
</script>
<style lang="scss">
  .recommend {
    .product {
      display: flex;
      position: relative;
      align-items: center;
      border-bottom: 0.0625rem solid #eee;
      padding: 0.9375rem 0.625rem;
      justify-content: space-between;

      .img-box {
        width: 7.1875rem;
        height: 4.375rem;
        overflow: hidden;
        justify-content: center;
      }

      .tet-box {
        width: 14.375rem;

        .name {
          font-size: 0.8125rem;
          color: #3e3e3e;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .intro{
           font-size: 0.625rem;
           color: #7e7e7e;
           line-height: 1.0625rem;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
        }
        .tip1{
          font-size: 0.6875rem;
          color: #b8b8b8;
          line-height: 1.0625rem;
        }
        .tip2{
          display: flex;
          justify-content: space-between;
          height: 1.25rem;
          .tags{
            display: flex;
            align-items: center;
          }
          .price{
            font-size: 1rem;
            color: #46d0ca;
          }
        }
      }
    }
  }
</style>
